<template>
    <div>
        <el-col :span="24">
            <div class="grid-content bg-purple">
                <div style="width: 100%; height: 287px" ref="chart"></div>
            </div>
        </el-col>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import Vue from "vue";
Vue.prototype.$echarts = echarts
export default {
    name: "UserStaticBar",
    data() {
        return {
            xData: [],
            yData: []
        }
    },
    mounted() {
        this.getDeptUserCount()
    },
    methods: {
        // 获取部门员工统计数据
        getDeptUserCount() {
            this.$api.user.getDeptUserCount().then(res => {
                if(res.data.code === 2000) {
                    this.xData = res.data.data.keyList
                    this.yData = res.data.data.valueList
                    this.showBarTable();
                }
            })
        },
        showBarTable() {
            this.chart = echarts.init(this.$refs.chart);
            let option = {
                title: {
                    subtext: '平台部门员工统计'
                },
                legend: {
                },
                // 鼠标悬停显示的信息
                tooltip: {
                    // 当tooltip的trigger为‘axis’时，显示多项数据内容数组
                    trigger: 'axis',
                    // 默认为直线，可选为：'line'（直线） | 'shadow'（阴影）
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: "{b} <br> 总人数: {c} 人"
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    data: this.xData,
                    axisTick: {
                        show: true
                    },
                    axisLabel: {
                        show: true,
                        interval: 0,
                        rotate: 34,
                        margin: 9.5,
                        fontFamily: "Courier New"
                    }
                },
                yAxis: {
                    type: "value",
                },
                series: [{
                    name: "员工个数",
                    type: "bar",
                    data: this.yData,
                    barWidth: 30,
                    legendHoverLink: true,
                    coordinateSystem: "cartesian2d",
                    roundCap: true,
                    showBackground: true,
                    backgroundStyle: {
                        borderColor: "rgba(203, 51, 51, 1)",
                        borderWidth: 0,
                    },
                    //图形上的文本标签
                    label: {
                        normal: {
                            show: true,
                            position: "inside",
                            // formatter: '{c}',
                            formatter: function(v) {
                                return v.data === 0 ? '无' : v.data;
                            }
                        }
                    },
                    labelLine: {
                        show: true,
                    },
                    // 设置柱状图渐变颜色
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#1268f3" // 0% 处的颜色
                            }, {
                                offset: 0.6,
                                color: "#08a4fa" // 60% 处的颜色
                            }, {
                                offset: 1,
                                color: "#01ccfe" // 100% 处的颜色
                            }], false)
                        }
                    },
                }]
            };
            // 传入数据
            this.chart.setOption(option);
        }
    }
}
</script>

<style scoped>

</style>
